<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-29 20:12:51
 * @FilePath: \YMU_forum_vue\src\views\User\components\main\UserHomeMain.vue
 * @Description: 用户资料展示
-->

<script setup>
import { getUserInfo } from '@/apis/user';
import { onMounted, ref } from "vue";
import { getUserTagList } from '@/apis/user';
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
// 用户信息表
let userData = ref([{
  uid: 0,
  nickname: '请登录',
  account: '20240624',
  gender: 'man',
  age: '24',
  email: '24654654554@qq.com',
  mobile: '保密',
  description: '欢迎发邮件到我的信箱',
  avator: 'src/assets/imgs/uid2.png'
}
]);
const login = () => {
  ElNotification({
    title: 'Error',
    message: "您的登录过期了！请重新登录",
    type: 'error',
  })
  router.push("/login")
}
// 获取用户标签序列
const tags = ref([])
onMounted(() => {
  // 获取后台数据
  getUserInfo().then(res => {
    if (res.code != 0) {
      login(res.msg)
      return
    } else {
      userData.value = [res.data];
    }

  });
  getUserTagList(userData.value[0].uid).then(res => {
    if (res.code == 0) {
      tags.value = res.data.pageInfo.list
    }
  });
  tags.value = [
    {
      name: 'vue'
    },
    {
      name: 'axios'
    },
    {
      name: 'java'
    },
    {
      name: 'pinia'
    },
    {
      name: 'python'
    },
  ]
});
</script>

<template>

  <el-text class="mainTitle">我的信息</el-text>
  <el-card class="box-card">

    <el-row :gutter="20" class="card-header">
      <el-col :lg="12" :xs="24">
        <img :src="userData[0].avator" class="img">
        <span>{{ userData[0].nickname }}</span>
      </el-col>
      <el-col :lg="12" :xs="24">
        <span>我的标签: </span>
        <el-tag class="tag" v-for="tag in tags">{{ tag.name }}</el-tag>
      </el-col>
    </el-row>

  </el-card>
  <div style="margin-top: 15px;margin-bottom: 10px;">
    <el-text class="title">我的简介:</el-text>
    <el-text class="text">{{ userData[0].description }}</el-text>
  </div>

  <el-row>
    <el-col :lg="12" :xs="24">
      <el-table :data="userData" fit="true" style="width: 100%">
        <el-table-column prop="account" label="账户号" width="130" />
        <el-table-column prop="gender" label="性别" width="130" />
        <el-table-column prop="age" label="年龄" width="140" />
      </el-table>
    </el-col>
    <el-col :lg="12" :xs="24">
      <el-table :data="userData" fit="true" style="width: 100%">
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="mobile" label="电话" width="200" />
      </el-table>
    </el-col>
  </el-row>


</template>

<style scoped>
.img {
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.mainTitle {
  margin-left: 30px;
  font-size: 18px;
  color: #000;
  font-weight: bolder;
}

.title {
  margin-left: 11px;
  font-size: 14px;
  font-weight: bolder;
}

.text {
  margin-left: 10px;
  font-size: 14px;
}

.card-header {
  justify-content: space-between;
  align-items: center;
}

.tag {
  margin-right: 5px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  /* margin: 20px; */
  border-radius: 5px;
  width: 100%;
}
</style>
